  <!--
   vue html scss
   content 功能（title，内容，问答类型，input submit）
   -->
<template>
  <div class="chat_window">
    <!-- title -->
    <top-but @close="$emit('close')"></top-but>
    <div class="tent_style">
      <div class="grid-content">
        <div
          class="tent"
          id="chat"
        >
          <div
            class="tent_overall"
            :class="{widthTent: widthSizeType === 'min'}"
          >
            <!-- 聊天 content -->
            <Content @submit="submit"></Content>
          </div>
        </div>
        <div class="foot">
          <div
            class="foot_nape"
            :class="{widthTent: widthSizeType === 'min'}"
          >
            <!-- 问答 type -->
            <tabs
              :value="moduleType"
              @change="tabChange"
            ></tabs>
            <!-- search -->
            <search
              ref="search"
              @submit="submit"
            ></search>
          </div>
        </div>
      </div>
      <div class="icon_style1"></div>
      <div class="icon_style2"></div>
    </div>
  </div>
</template>

<script>
import Content from "./Operation/content.vue";
import Search from "./Operation/search.vue";
import Tabs from "./Operation/tabs.vue";
import TopBut from "./Operation/topBut.vue";
export default {
  components: {
    TopBut,
    Search,
    Tabs,
    Content,
  },
  computed: {
    moduleType() {
      return this.$store.state.aiChat.moduleType;
    },
    // 设备
    widthSizeType() {
      return this.$store.state.aiChat.widthSizeType;
    },
    // 加载
    loading() {
      return this.$store.state.aiChat.loading;
    },
    chatDataItem() {
      return this.$store.state.aiChat.chatDataItem;
    },
  },
  watch: {
    loading(val) {
      if (val) {
        this.dynamicLoading();
      } else {
        this.dynamicLoadingTimer();
      }
    },
    chatDataItem() {
      this.scrollToBottom();
    },
  },
  data() {
    return {
      loadingTimer: null,
    };
  },
  methods: {
    tabChange(type) {
      this.$refs.search.reset();
      this.$store.dispatch("aiChat/setModuleType", type);
    },
    // 动态加载页面
    dynamicLoading() {
      this.loadingTimer = setInterval(() => {
        this.startcLoadingTimer();
      }, 500);
    },
    // 结束加载
    dynamicLoadingTimer() {
      clearInterval(this.loadingTimer);
    },
    // 开始加载，页面上浮
    startcLoadingTimer() {
      setTimeout(() => {
        this.scrollToBottom();
      }, 100);
    },
    // 外部 切换对话框
    changeChat() {
      this.$refs.search.reset();
    },
    // 提问 提交
    submit(params) {
      this.$store
        .dispatch("aiChat/setChatData", {
          ...params,
        })
        .then(() => {
          this.startcLoadingTimer();
        });
    },
    // 定义将滚动条定位在底部的方法
    scrollToBottom() {
      this.$nextTick(() => {
        let chat = this.$el.querySelector("#chat");
        chat.scrollTop = chat.scrollHeight;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.chat_window {
  background-color: #ffffff;
  transition: width 0.5s ease;
  height: 100%;
  width: 100%;
  .tent_style {
    overflow: hidden;
    position: relative;
    top: 0;
    left: 0;
    background-color: #eaf3fe;
    height: calc(100% - 55px);
    display: flex;
    justify-content: center;
    .grid-content {
      width: 100%;
      display: flex;
      flex-direction: column;
      z-index: 9;
      .tent {
        display: flex;
        justify-content: center;
        overflow: auto;
        height: 100%;
        width: 100%;
        overflow: auto;
        .tent_overall {
          width: 700px;
        }
      }
      .foot {
        display: flex;
        justify-content: center;
        padding-top: 10px;
        .foot_nape {
          padding: 0 10px;
          width: 720px;
        }
      }
    }
    .widthTent {
      width: 100%;
    }
  }
}
.icon_style1 {
  width: 326px;
  height: 326px;
  background: linear-gradient(
    227deg,
    rgba(255, 255, 255, 0.71) 0%,
    rgba(168, 220, 255, 0.35) 100%
  );
  border-radius: 50%;
  position: absolute;
  top: -60px;
  left: -100px;
}
.icon_style2 {
  width: 440px;
  height: 443px;
  background: linear-gradient(
    180deg,
    rgba(227, 243, 255, 0.3) 0%,
    rgba(100, 172, 255, 0.3) 100%
  );
  border-radius: 50%;
  position: absolute;
  right: -280px;
  top: 100px;
}
</style>
